<template>
  <view class="page-container">
    <!-- 顶部导航栏 -->
    <view class="nav-container">
      <view class="input-box">
        <!-- 输入区域和导航按钮的容器 -->
        <view class="input-nav-container">
          <!-- 左侧输入区域 -->
          <view class="inputs-container">
            <!-- 起点输入框 -->
            <view class="input-row">
              <view class="input-label">起点</view>
              <input 
                class="input-field"
                type="text" 
                placeholder="我的位置" 
                v-model="startPoint"
                @focus="handleInputFocus"
              />
            </view>
            
            <!-- 终点输入框 -->
            <view class="input-row">
              <view class="input-label">终点</view>
              <input 
                class="input-field"
                type="text" 
                placeholder="请输入目的地" 
                v-model="endPoint"
                @focus="handleInputFocus"
              />
            </view>
          </view>
          
          <!-- 右侧导航按钮 -->
          <view class="nav-button-container">
            <button class="nav-button" @click="handleNavigate">
              <text class="nav-text">导</text>
              <text class="nav-text">航</text>
            </button>
          </view>
        </view>
      </view>
    </view>

    <!-- 地图容器 -->
    <map
      id="myMap"
      class="map-container"
      :longitude="centerLocation.longitude"
      :latitude="centerLocation.latitude"
      :markers="markers"
      :polyline="polylines"
    ></map>

    <!-- 底部路线选择 -->
    <view class="segment-container">
      <view
        class="segment-item"
        :class="{ active: item.isActive, 'direct-line': item.isDirectLine }"
        v-for="(item, index) in segments"
        :key="index"
        @click="selectSegment(index)"
      >
        <text class="segment-way">{{ item.way || '步行' }}{{ item.isDirectLine ? '(直线)' : '' }}</text>
        <text class="segment-time">{{ item.time }}</text>
        <text class="segment-detail">{{ item.detail }}</text>
      </view>
    </view>

    <!-- 悬浮按钮 -->
    <view 
      class="floating-button" 
      @click="handleLocateUser"
    >
      <text>定</text>
    </view>
  </view>
</template>

<script>
import { getNavigationRoutes, getGeocode } from '/api/map.js';

export default {
  data() {
    return {
      startPoint: '我的位置', // 默认起点为"我的位置"
      endPoint: '', // 终点
      centerLocation: { longitude: 0, latitude: 0 }, // 地图中心点
      markers: [], // 标记点
      segments: [], // 路线方案
      mapContext: null,
      polylines: [], // 路线数据
      routes: [], // 存储所有路线方案
      destinationPoint: null, // 目的地坐标
      destinationAddress: '' // 目的地地址
    };
  },
  mounted() {
    this.mapContext = uni.createMapContext('myMap', this);
    this.getUserLocation(); // 页面加载时自动定位
    
    // 接收从其他页面传来的参数
    const eventChannel = this.getOpenerEventChannel();
    if (eventChannel && eventChannel.on) {
      eventChannel.on('acceptDataFromOpener', async (data) => {
        console.log('接收到的目的地数据:', data);
        
        // 如果接收到了地址信息
        if (data && data.address) {
          // 保存地址到终点输入框
          this.endPoint = data.address;
          this.destinationAddress = data.address;
          
          try {
            // 显示加载中提示
            uni.showLoading({ title: '获取地址坐标...' });
            
            // 调用getGeocode函数获取经纬度
            const geocodeResult = await getGeocode(data.address);
            
            // 隐藏加载提示
            uni.hideLoading();
            
            if (geocodeResult && geocodeResult.latitude && geocodeResult.longitude) {
              // 保存目的地经纬度
              this.destinationPoint = {
                latitude: geocodeResult.latitude,
                longitude: geocodeResult.longitude
              };
              
              console.log('地址转换为坐标成功:', this.destinationPoint);
              
              // 自动开始导航
              this.$nextTick(() => {
                this.handleNavigateToDestination();
              });
            } else {
              uni.showToast({
                title: '无法解析地址坐标',
                icon: 'none'
              });
            }
          } catch (error) {
            uni.hideLoading();
            console.error('地址解析失败:', error);
            uni.showToast({
              title: '地址解析失败',
              icon: 'none'
            });
          }
        } else if (data && data.latitude && data.longitude) {
          // 兼容直接传递经纬度的情况
          this.destinationPoint = {
            latitude: data.latitude,
            longitude: data.longitude
          };
          
          // 如果有地址信息，保存到终点输入框
          if (data.address) {
            this.endPoint = data.address;
            this.destinationAddress = data.address;
          } else {
            // 如果没有地址信息，显示经纬度
            this.endPoint = `${data.latitude.toFixed(6)},${data.longitude.toFixed(6)}`;
          }
          
          // 自动开始导航
          this.$nextTick(() => {
            this.handleNavigateToDestination();
          });
        }
      });
    }
  },
  methods: {
    /**
     * 获取用户当前位置
     */
    getUserLocation() {
      uni.showLoading({ title: '定位中...' });

      uni.getLocation({
        type: 'gcj02', // 使用 GCJ-02 坐标系
        success: (res) => {
          const { longitude, latitude } = res;

          // 更新地图中心点
          this.centerLocation = { longitude, latitude };

          // 强制更新地图视图
          this.mapContext.moveToLocation({
            longitude,
            latitude,
            success: () => {
              uni.hideLoading();
              console.log('已定位到您的位置:', { longitude, latitude });

              // 更新用户位置的标记
              this.updateUserMarker(longitude, latitude);
            },
            fail: () => {
              uni.hideLoading();
              uni.showToast({
                title: '地图移动失败',
                icon: 'none'
              });
            }
          });
        },
        fail: () => {
          uni.hideLoading();
          uni.showToast({
            title: '定位失败，请检查权限',
            icon: 'none'
          });
        }
      });
    },

    /**
     * 更新用户位置的标记
     */
    updateUserMarker(longitude, latitude) {
      this.markers = [{
        id: 1,
        longitude,
        latitude,
        width: 30,
        height: 40,
        iconPath: '/static/起点.png', // 使用图片作为标记
        callout: {
          content: '我的位置',
          color: '#ffffff',
          bgColor: '#007AFF',
          fontSize: 12,
          borderRadius: 4,
          padding: 3,
          display: 'ALWAYS',
          width: 60
        }
      }];
    },

    /**
     * 处理输入框聚焦事件
     */
    handleInputFocus() {
      console.log('输入框聚焦');
    },

    /**
     * 用户点击悬浮按钮定位
     */
    handleLocateUser() {
      this.getUserLocation();
    },

    /**
     * 选择路线
     */
    selectSegment(index) {
      this.segments.forEach((item, i) => {
        item.isActive = i === index;
      });

      // 切换显示对应的路线
      this.polylines = this.routes[index].polylines;
      console.log(`选择了第 ${index + 1} 条路线`);
    },

    /**
     * 处理导航按钮点击事件
     */
    async handleNavigate() {
      let startPoint;
      
      try {
        // 如果起点填写为"我的位置"或为空，则使用当前位置
        if (!this.startPoint || this.startPoint === '我的位置') {
          startPoint = this.centerLocation;
        } else {
          // 否则，尝试将起点地址转换为经纬度
          uni.showLoading({ title: '获取起点坐标...' });
          
          try {
            const geocodeResult = await getGeocode(this.startPoint);
            
            if (geocodeResult && geocodeResult.latitude && geocodeResult.longitude) {
              startPoint = {
                latitude: geocodeResult.latitude,
                longitude: geocodeResult.longitude
              };
              
              console.log('起点地址转换为坐标成功:', startPoint);
            } else {
              uni.showToast({
                title: '无法解析起点坐标',
                icon: 'none'
              });
              return;
            }
          } catch (error) {
            uni.hideLoading();
            console.error('起点地址解析失败:', error);
            uni.showToast({
              title: '起点地址解析失败',
              icon: 'none'
            });
            return;
          }
          
          uni.hideLoading();
        }
        
        // 如果手动输入了终点地址且与之前不同，则需要获取经纬度
        if (this.endPoint && (!this.destinationAddress || this.endPoint !== this.destinationAddress)) {
          uni.showLoading({ title: '获取地址坐标...' });
          
          try {
            // 尝试将地址转换为经纬度
            const geocodeResult = await getGeocode(this.endPoint);
            
            if (geocodeResult && geocodeResult.latitude && geocodeResult.longitude) {
              // 更新目的地坐标和地址
              this.destinationPoint = {
                latitude: geocodeResult.latitude,
                longitude: geocodeResult.longitude
              };
              this.destinationAddress = this.endPoint;
              
              console.log('地址转换为坐标成功:', this.destinationPoint);
            } else {
              uni.showToast({
                title: '无法解析地址坐标',
                icon: 'none'
              });
              return;
            }
          } catch (error) {
            uni.hideLoading();
            console.error('地址解析失败:', error);
            uni.showToast({
              title: '地址解析失败',
              icon: 'none'
            });
            return;
          }
          
          uni.hideLoading();
        }
        
        // 如果没有目的地坐标，使用默认坐标
        const fixedEndPoint = this.destinationPoint || {
          latitude: 30.170283,
          longitude: 120.107813
        };
        
        // 开始导航路线规划
        this.planRouteToDestination(startPoint, fixedEndPoint);
      } catch (error) {
        console.error('导航处理失败:', error);
        uni.showToast({
          title: '导航处理失败',
          icon: 'none'
        });
      }
    },
    
    /**
     * 规划路线到目的地
     */
    async planRouteToDestination(startPoint, endPoint) {
      try {
        uni.showLoading({ title: '规划路线中...' });
        const response = await getNavigationRoutes(startPoint, endPoint);
        uni.hideLoading();

        // 处理返回的路线方案
        this.routes = response.routes;
        this.segments = this.routes;

        // 如果没有获取到有效路线，显示提示
        if (this.routes.length === 0) {
          uni.showToast({
            title: '未找到有效路线',
            icon: 'none',
            duration: 2000
          });
          return;
        }

        // 检查是否是直线路线（距离过远时的备选方案）
        const isDirectLine = this.routes.some(route => route.isDirectLine);
        if (isDirectLine) {
          uni.showToast({
            title: '距离较远，显示直线参考',
            icon: 'none',
            duration: 3000
          });
        }

        // 检查是否是因错误而返回的模拟路线
        const isErrorRoute = this.routes.some(route => route.isError);
        if (isErrorRoute) {
          uni.showToast({
            title: '路线请求失败，显示直线参考',
            icon: 'none',
            duration: 3000
          });
        }

        // 默认显示第一个方案的路线
        this.polylines = this.routes[0].polylines;

        // 添加起点和终点的标记
        this.markers = [
          {
            id: 1,
            longitude: startPoint.longitude,
            latitude: startPoint.latitude,
            width: 30,
            height: 40,
            iconPath: '/static/起点.png', // 使用图片作为起点标记
            callout: {
              content: this.startPoint === '我的位置' ? '我的位置' : this.startPoint,
              color: '#ffffff',
              bgColor: '#007AFF',
              fontSize: 12,
              borderRadius: 4,
              padding: 3,
              display: 'ALWAYS',
              width: 60
            }
          },
          {
            id: 2,
            longitude: endPoint.longitude,
            latitude: endPoint.latitude,
            width: 30,
            height: 40,
            iconPath: '/static/终点.png', // 使用图片作为终点标记
            callout: {
              content: this.destinationAddress || `目的地`,
              color: '#ffffff',
              bgColor: '#FF3B30',
              fontSize: 12,
              borderRadius: 4,
              padding: 3,
              display: 'ALWAYS',
              width: 60
            }
          }
        ];

        // 调整地图显示范围，使其包含整个路线
        this.mapContext.includePoints({
          points: [
            { longitude: startPoint.longitude, latitude: startPoint.latitude },
            { longitude: endPoint.longitude, latitude: endPoint.latitude },
            ...(this.routes[0].polylines[0].points || [])
          ],
          padding: [50, 50, 50, 50]
        });

        // 提示用户
        if (!isDirectLine && !isErrorRoute) {
          uni.showToast({
            title: '路线已绘制',
            icon: 'success'
          });
        }
      } catch (error) {
        uni.hideLoading();
        console.error('导航请求失败:', error);
        uni.showToast({
          title: '导航请求失败',
          icon: 'none'
        });
      }
    },
    
    /**
     * 导航到指定目的地
     */
    async handleNavigateToDestination() {
      if (!this.destinationPoint) {
        return;
      }
      
      let startPoint;
      
      // 检查起点设置
      if (!this.startPoint || this.startPoint === '我的位置') {
        // 使用当前位置作为起点
        startPoint = this.centerLocation;
      } else {
        // 起点不是"我的位置"，需要解析地址
        try {
          uni.showLoading({ title: '获取起点坐标...' });
          const geocodeResult = await getGeocode(this.startPoint);
          uni.hideLoading();
          
          if (geocodeResult && geocodeResult.latitude && geocodeResult.longitude) {
            startPoint = {
              latitude: geocodeResult.latitude,
              longitude: geocodeResult.longitude
            };
            console.log('起点地址转换为坐标成功:', startPoint);
          } else {
            uni.showToast({
              title: '无法解析起点坐标',
              icon: 'none'
            });
            return;
          }
        } catch (error) {
          uni.hideLoading();
          console.error('起点地址解析失败:', error);
          uni.showToast({
            title: '起点地址解析失败',
            icon: 'none'
          });
          return;
        }
      }
      
      const fixedEndPoint = this.destinationPoint;
      
      // 开始导航路线规划
      this.planRouteToDestination(startPoint, fixedEndPoint);
    }
  }
};
</script>

<style>
page {
  height: 100%;
  margin: 0;
  padding: 0;
}

.page-container {
  height: 100%;
  display: flex;
  flex-direction: column;
}

/* 顶部导航样式 */
.nav-container {
  padding: 10px;
  z-index: 10;
  background-color: #ffffff;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.input-box {
  border: 1px solid #e0e0e0;
  background-color: #f5f5f5;
  border-radius: 8px;
  padding: 10px;
}

.input-nav-container {
  display: flex;
  flex-direction: row;
}

.inputs-container {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.input-row {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
  border-bottom: 1px solid #e0e0e0;
  padding-bottom: 8px;
}

.input-row:last-child {
  margin-bottom: 0;
}

.input-label {
  width: 40px;
  font-size: 14px;
  color: #333;
  font-weight: bold;
}

.input-field {
  flex: 1;
  padding: 5px 0;
  font-size: 14px;
}

.nav-button-container {
  width: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-left: 10px;
}

.nav-button {
  width: 30px;
  height: 80px;
  background-color: #2e8b57;
  color: white;
  border-radius: 15px;
  border: none;
  text-align: center;
  padding: 5px 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.nav-text {
  font-size: 14px;
  margin: 2px 0;
}

/* 地图容器 */
.map-container {
  flex: 1;
  width: 100%;
}

/* 底部路线选择 */
.segment-container {
  display: flex;
  width: 100%;
  padding: 15px 10px;
  box-sizing: border-box;
  background: white;
  overflow-x: auto; /* 允许水平滚动 */
  border-top: 1px solid #e0e0e0;
  box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.05);
}

.segment-item {
  flex: 1;
  min-width: 100px; /* 设置最小宽度 */
  text-align: center;
  padding: 15px 10px;
  margin: 0 5px;
  border-radius: 8px;
  transition: all 0.3s ease;
  background-color: #f5f5f5;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.segment-item.active {
  background-color: #d7f3e3;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
  transform: translateY(-2px);
}

.segment-item.direct-line {
  border: 1px dashed #2e8b57;
}

.segment-way {
  font-size: 14px;
  font-weight: bold;
  margin-bottom: 8px;
  display: block;
  color: #2e8b57;
}

.segment-time {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 8px;
  display: block;
  color: #333;
}

.segment-detail {
  font-size: 14px;
  color: #666;
  white-space: pre-line;
}

/* 修改选中路线的文字颜色 */
.segment-item.active .segment-time,
.segment-item.active .segment-detail {
  color: #2e8b57;
}

/* 悬浮按钮样式 */
.floating-button {
  position: fixed;
  bottom: 200px;
  right: 20px;
  background-color: #2e8b57;
  color: white;
  padding: 10px;
  border-radius: 50%;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  z-index: 20;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  width: 40px;
  height: 40px;
}

.floating-button:active {
  transform: scale(0.95);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}
</style>
